// 获取用户登录的信息
function getUserMessage() {
    let userMessage = JSON.parse(localStorage.getItem('userDataInformation'))
    if (userMessage) {
        let str = `
                    <li><img src="${userMessage[0].headPortrait}" alt=""></li>
                    <li>${userMessage[0].userName}</li>
                `
        $('#headerTop .headerTopUserMessage').html(str)
    }else{
        let str = `
                    <li>未登录</li>
                `
        $('#headerTop .headerTopUserMessage').html(str)
    }
}

// 搜索展开部分
function unSearch() {
    $('#header>.search>img').on('click', function () {
        $('#header>.searchPro').animate({
            width: 'toggle'
        }, 350)
    })
}

// 搜素功能
function searchPro() {
    let count
    $('#header>.searchPro>input').on('keydown', function (e) {
        let keyCode = e.keyCode || e.which
        if (keyCode == 13) {
            $.ajax({
                url: 'http://www.xiongmaoyouxuan.com/api/search',
                type: 'get',
                data: {
                    word: $('#header>.searchPro>input').val()
                },
                success: function (data) {
                    let Arr = data.data.list
                    if (Arr.length % 4 == 0) {
                        count = Arr.length
                    } else {
                        count = Arr.length - Arr.length % 4
                    }
                    goodsList(Arr.slice(0, count))
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
    })
}

// 顶部商品名称展示商品图片
function hearderProNameToShowProNav() {
    $('#header .proNameNav li').on('mouseover',function(){
        $(this).css('cursor', 'pointer')
    })
    $('#header .proNav').css('display', 'none')
    $('#header .proNameNav li').on('click', function () {
        $(this).css('cursor', 'pointer')
        $('#header .proNav').slideToggle(1000)
        if ($(this).index() == 0) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/2?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.hotCommodities)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
        if ($(this).index() == 1) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/4?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.items.list)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
        if ($(this).index() == 2) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/10?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.items.list)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
        if ($(this).index() == 3) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/12?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.items.list)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
        if ($(this).index() == 4) {
            $.ajax({
                url: 'http://quan.lukou.com/api/tab/11?start=0',
                type: 'get',
                success: function (data) {
                    headerProNav(data.data.items.list)
                },
                error: function (err) {
                    alert("网络请求失败：" + err)
                }
            })
        }
    })
}

// 顶部渲染商品图片信息
function headerProNav(proNavList) {
    let proArr = proNavList.map(item => {
        return `
                <div class="proNavItem">
                    <div class="proNavItemImg">
                        <img src="${item.image}" alt="">
                    </div>
                    <span>${item.title}</span>
                </div>
                `
    }).join('')
    $('#header .proNav').html(proArr);
}

// 首页导航菜单部分
function navMenu() {
    $('#navMenu .navMenuItem li').on('click', function () {
        $('#navMenu .navMenuItem li').removeClass('active')
        $(this).addClass('active')
        if ($(this).index() == 0) {
            location.href = '../pages/index.html'
        }
        if ($(this).index() == 1) {
            location.href = '../pages/nineFreeShipping.html'
        }
        if ($(this).index() == 2) {
            location.href = '../pages/superValue.html'
        }
        if ($(this).index() == 3) {
            location.href = '../pages/emergencyCooling.html'
        }
    })
}

// 搜索页面从本地存储中获取搜索的数据
function searchObtainList() {
    let searchArr = JSON.parse(localStorage.getItem('searchList'))
    goodsList(searchArr)
}
// 搜索页面商品列表部分
function goodsList(goods) {
    let goodsArr = goods.map(item => {
        return `
                <div class="goods" onClick=singlePro(${item.id})>
                    <img src="${item.image}" alt="">
                    <h2>${item.title}</h2>
                    <div class="packageMail clearfix">
                        <span class="tianmao fl">天猫</span>
                        <span class="baoyou fr">包邮</span>
                    </div>
                    <div class="goodsPrices">
                        <span class="price">￥${item.price}</span>
                        <span class="person">${item.saleNum}人已购买</span>
                        <span class="juan">${item.couponValue}</span>
                    </div>
                </div>
            `
    }).join('')
    $('#goodsList').html(goodsArr);
    viewMoreBtn(goods)
}

// 点击获取单个商品信息
function singlePro(singleProId){
    location.href='../pages/proDetails.html?id='+singleProId
}

//查看更多按钮
function viewMoreBtn(oldGoodsArr) {
    let page = 0
    $('#viewMore').on('click', function () {
        $.ajax({
            url: 'http://www.xiongmaoyouxuan.com/api/tab/1/feeds',
            data: {
                start: 20,
                sort: page
            },
            type: 'get',
            success: function (data) {
                let count
                let newProList = [...oldGoodsArr, ...data.data.list]
                if (newProList.length % 4 == 0) {
                    count = newProList.length
                } else {
                    count = newProList.length - newProList.length % 4
                }
                goodsList(newProList.slice(0, count))
                    ++page
            },
            error: function (err) {
                alert("网络请求失败：" + err)
            }
        })
    })
}

// 各种方法的调用
getUserMessage()
unSearch()
searchPro()
hearderProNameToShowProNav()
navMenu()
searchObtainList()
viewMoreBtn()